<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人社保计算软件2117317227-秦国靖</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        //js代码要写在这里，js让网页和用户交互。
        function calc() {
            //实现步骤:1、把用户输入的工资拿到。
            //sal是“8000”      8000
            sal = document.getElementById("salary").value;
            //把字符串变成数字
            salnum = parseInt(sal);
            //2、开始计算
            ylgr01 = salnum * 0.08;
            ylgs01 = salnum * 0.2;
            ybgr01 = salnum * 0.02;
            ybgs02 = salnum * 0.06;
            sygr01 = salnum * 0.005;
            sygs01 = salnum * 0.015;
            gs = salnum * 0.005;
            sy = salnum * 0.008;
            gjj = salnum * 0.12;
            grhj = ylgr01 + ybgr01 + sygr01 + gjj;
            gshj = ylgs01 + ybgs02 + sygs01 + gs + sy + gjj;
            ze = grhj + gshj;

            //3、把计算的结果放到单元格里。
            document.getElementById("ylgr").innerText = ylgr01;
            document.getElementById("ylgs").innerText = ylgs01;
            document.getElementById("yb01").innerText = ybgr01;
            document.getElementById("yb02").innerText = ybgs02;
            document.getElementById("sygr").innerText = sygr01;
            document.getElementById("sygs").innerText = sygs01;
            document.getElementById("gs01").innerText = gs;
            document.getElementById("sy01").innerText = sy;
            document.getElementById("gjj1").innerText = gjj;
            document.getElementById("gjj2").innerText = gjj;
            document.getElementById("grhj1").innerText = grhj;
            document.getElementById("gshj1").innerText = gshj;
            document.getElementById("ze1").innerText = ze;
        }
    </script>
</head>

<body>
    <div class="container text-center">
        <h1>个人社保计算</h1>
        <table class="table table-bordered text-center">
            <tr>
                <td>工资</td>
                <td colspan="3">
                    <input id="salary" class="form-control" type="text" placeholder="请输入工资：">
                </td>
                <td>
                    <button onclick="calc()" class="btn btn-danger btn-block">计算</button>
                </td>
            </tr>
            <tr class="bg-primary">
                <td>险种</td>
                <td>个人%</td>
                <td>个人</td>
                <td>公司%</td>
                <td>公司</td>
            </tr>
            <tr>
                <td>养老</td>
                <td>8%</td>
                <td id="ylgr"></td>
                <td>20%</td>
                <td id="ylgs"></td>
            </tr>
            <tr>
                <td>医保</td>
                <td>2%</td>
                <td id="yb01"></td>
                <td>6%</td>
                <td id="yb02"></td>
            </tr>
            <tr>
                <td>失业</td>
                <td>0.5%</td>
                <td id="sygr"></td>
                <td>1.5%</td>
                <td id="sygs"></td>
            </tr>
            <tr>
                <td>工伤</td>
                <td></td>
                <td></td>
                <td>0.5%</td>
                <td id="gs01"></td>
            </tr>
            <tr>
                <td>生育</td>
                <td></td>
                <td></td>
                <td>0.8%</td>
                <td id="sy01"></td>
            </tr>
            <tr>
                <td>公积金</td>
                <td>12%</td>
                <td id="gjj2"></td>
                <td>12%</td>
                <td id="gjj1"></td>
            </tr>
            <tr>
                <td>合计</td>
                <td>个人合计</td>
                <td id="grhj1"></td>
                <td>公司合计</td>
                <td id="gshj1"></td>
            </tr>
            <tr>
                <td colspan="4">总额</td>
                <td id="ze1"></td>
            </tr>
        </table>
    </div>
</body>

</html>